<template>
   <div class="person">
     <h2>当前求和为:{{sum}},放大十倍后{{bigSum}}</h2>
     <button @click="changeSum">点我sum+1</button><hr>
     <img v-for="(dog,index) in dogList" :src="dog" :key="index">
     <button @click="getDog">再来一只狗</button>
   </div>


</template>
<!--TS 初始-->
<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
import useSum from "@/hooks/useSum";//引入调用的hooks
import useDog from "@/hooks/useDog";
const  {sum,changeSum,bigSum}=useSum()
const {dogList,getDog}=useDog()

//以下内容用hooks封装
// import axios from "axios";
// import {ref, onBeforeMount, onMounted, onUpdated, onBeforeUpdate, onBeforeUnmount, onUnmounted, reactive} from "vue";
// let sum=ref(0)
// let dogList=reactive([
//     'https://images.dog.ceo/breeds/pembroke/n02113023_1151.jpg'
//
// ])
// //axios发起请求
// async function getDog(){
// try {
//   let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
//   // console.log(result.data)//Json格式链接信息
//   // console.log(result.data.message)//只有链接
//   dogList.push(result.data.message)//展示小狗
// }catch (error){
//   alert("error")
// }
// }
// function  changeSum(){
//   sum.value+=1;
// }
</script>
<style scoped>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
person{
  font-size: 20px;
  display: flex;
}
img{
  height: 100px;
  margin-right: auto;
}
</style>